<!-- <section class="search-wrap"> -->
<ion-header>
  <!-- searchType100 搜索户型 -->
  <ng-container *ngIf="searchType === 'searchType100'; else searchTypeNot100">
    <ng-container *ngIf="titleBar">
      <ion-toolbar style="--background:#fff;padding-left: 0rem;padding-right: 0.75rem;">
        <ion-buttons slot="start" appDebounceClick (debounceClick)="back()" *ngIf="hasSearched">
          <img class="header-icon-img" style="margin-right: 0px;" src="assets/icon/back_left.png">
        </ion-buttons>
        <form action="javascript: return true;" class="searchType100-bg">
          <ion-buttons class="nav-title nav-position" style="height: 2.75rem; flex-shrink: 0;"
            *ngIf="titleBar?.position" slot="start" class="start" appDebounceClick
            (debounceClick)="buttonClick(titleBar.position.link)">
            <span id="identityCityName" *ngIf="titleBar.position &&  titleBar.position?.name">{{titleBar.position.name}}
            </span>
            <i class="triangle-icon"></i>
            <i class="sep"></i>
          </ion-buttons>
          <ion-searchbar #searchBar (keyup)="search($event)" inputmode="" class="search-bar"
            placeholder={{tagData?.placeholder}} autocomplete="off" onInput="if(value.length>30)value=value.slice(0,30)"
            (ionBlur)="ionBlur()" [(ngModel)]="keyword" mode="ios" (ionFocus)="focusInput()"
            (ionChange)="searchChange($event)" [ngModelOptions]="{standalone: true}" style="--background:#fff;">
          </ion-searchbar>
        </form>
        <ion-buttons *ngIf="!hasSearched" style="text-align: right;" class="search-btn" slot="end" appDebounceClick
          (debounceClick)="search()" [ngStyle]="{'color': searchBtnColor}">
          搜索
        </ion-buttons>


        <ion-buttons slot="end" class="end" appDebounceClick (debounceClick)="moreLine(titleBar.moreLine)"
          *ngIf="titleBar?.moreLine?.layout==='right' && hasSearched">
          <img class="header-icon-img-r" src="assets/icon/{{titleBar.moreLine.icon}}" alt="moreLine">
          <ng-container *ngIf="titleBar.moreLine.count!==undefined">
            <ion-badge class="topBadge" [ngStyle]="titleBar.moreLine.link.params.badgeCssStyle | styleFilter">
              {{titleBar.moreLine.count}}</ion-badge>
          </ng-container>

        </ion-buttons>

      </ion-toolbar>
      <ion-toolbar
        *ngIf="showInHeader && hasSearched && this.coms.length > 0 && this.coms[0].tagData.style === 'tag.AppTabTagLogic'"
        style="--padding-bottom:0px;padding-left: 0px;padding-right: 0px;">
        <ul class="ulTopTab 1">
          <li *ngFor="let item of this.coms[0].tagData.data;let i=index;" id="fixedNavTab{{i}}"
            [ngClass]="{'active': this.coms[0].tagData.currentTab === item.indexTab}" [ngStyle]="{'width': subWidth}"
            appDebounceClick (debounceClick)="subChange(item,item.indexTab,true)">
            <span id="fixedSpanNavTab{{i}}">{{item.label}}</span>
            <!-- <span id="fixedSpanNavTab{{i}}" [ngClass]="{'spanBadge':item.badge!=='0'}">{{item.label}}</span> -->
          </li>
        </ul>
        <hr *ngIf="this.coms[0].tagData.isShowLine===true"
          style="width: 100%;height: 0.04rem;background-color: #EBEBED;">
      </ion-toolbar>
    </ng-container>



  </ng-container>
  <ng-template #searchTypeNot100>
    <!-- 正常搜索框在上 -->
    <ng-container *ngIf="!tagData.position">
      <!-- 2024.04.07 找好店 找好货 新增 searchType 400 -->
      <ng-container *ngIf="searchType === 'searchType400'; else searchTypeNot400">
        <ion-toolbar class="searchType400"
          style="--background:#fff;padding-left: 0;padding-right: 0.75rem;padding-top: calc( 0.25rem + env(safe-area-inset-top));">
          <ion-buttons slot="start" appDebounceClick (debounceClick)="back()">
            <img class="header-icon-img" src="assets/img/back_left.png">
          </ion-buttons>


          <div class="search-bar-box" >
            <div class="search-title" appDebounceClick (debounceClick)="popoverClick($event)" >{{popoverLabel}}
              <img class="search-title-icon" src='assets/fw/nav_icon_down_arrow@3x.png' />
            </div>

            <div class="search-split-line"></div>
            <form action="javascript: return true;">
              <ion-searchbar #searchBar searchIcon="none" (keypress)="search($event)" inputmode=""
                class="search-bar-type400" placeholder={{oneWay?oneWay:tagData?.placeholder}} autocomplete="off"
                onInput="if(value.length>30)value=value.slice(0,30)" (ionBlur)="ionBlur()" [(ngModel)]="keyword"
                mode="ios" (ionFocus)="focusInput()" (ionChange)="searchChange()" [ngModelOptions]="{standalone: true}">
              </ion-searchbar>
            </form>
            <ion-buttons class="search-btn-type400" slot="end" appDebounceClick (debounceClick)="search()">
              搜索
            </ion-buttons>
          </div>

        </ion-toolbar>
      </ng-container>
      <ng-template #searchTypeNot400>
        <ion-toolbar style="--background:#fff;padding-left: 0;padding-right: 0.75rem; ">
          <ion-buttons slot="start" appDebounceClick (debounceClick)="back()">
            <img class="header-icon-img" src="assets/img/back_left.png">
          </ion-buttons>
          <form action="javascript: return true;">
            <ion-searchbar #searchBar (keypress)="search($event)" inputmode="" class="search-bar"
              placeholder={{oneWay?oneWay:tagData?.placeholder}} autocomplete="off"
              onInput="if(value.length>30)value=value.slice(0,30)" (ionBlur)="ionBlur()" [(ngModel)]="keyword"
              mode="ios" (ionFocus)="focusInput()" (ionChange)="searchChange()" [ngModelOptions]="{standalone: true}">
            </ion-searchbar>
          </form>
          <ion-buttons style="text-align: right;margin-left: 1rem;" class="search-btn" slot="end" appDebounceClick
            (debounceClick)="search()" [ngStyle]="{'color': searchBtnColor}">
            搜索
          </ion-buttons>
        </ion-toolbar>
      </ng-template>

      <ion-toolbar *ngIf="showInHeader && hasSearched"
        style="--padding-bottom:0px;padding-left: 0px;padding-right: 0px;">
        <ul class="ulTopTab 2">
          <li *ngFor="let item of this.coms[0].tagData.data;let i=index;" id="fixedNavTab{{i}}"
            [ngClass]="{'active': this.coms[0].tagData.currentTab === item.indexTab}" [ngStyle]="{'width': subWidth}"
            appDebounceClick (debounceClick)="subChange(item,item.indexTab)">
            <span id="fixedSpanNavTab{{i}}">{{item.label}}</span>
            <!-- <span id="fixedSpanNavTab{{i}}" [ngClass]="{'spanBadge':item.badge!=='0'}">{{item.label}}</span> -->
          </li>
        </ul>
        <hr *ngIf="this.coms[0].tagData.isShowLine===true"
          style="width: 100%;height: 0.04rem;background-color: #EBEBED;">
      </ion-toolbar>
    </ng-container>



    <!-- 蜂喔搜索框在下 -->
    <ng-container *ngIf="tagData.position">
      <ion-toolbar *ngIf="showInHeader" style="--padding-bottom:0px;padding-left: 0px;padding-right: 0px;">
        <ul class="ulTopTab 3">
          <li *ngFor="let item of this.coms[0].tagData.data;let i=index;" id="fixedNavTab{{i}}"
            [ngClass]="{'active': this.coms[0].tagData.currentTab === item.indexTab}" [ngStyle]="{'width': subWidth}"
            appDebounceClick (debounceClick)="subChange(item,item.indexTab)">
            <span id="fixedSpanNavTab{{i}}">{{item.label}}</span>
            <!-- <span id="fixedSpanNavTab{{i}}" [ngClass]="{'spanBadge':item.badge!=='0'}">{{item.label}}</span> -->
          </li>
        </ul>
        <hr *ngIf="this.coms[0].tagData.isShowLine===true"
          style="width: 100%;height: 0.04rem;background-color: #EBEBED;">
      </ion-toolbar>
      <ion-toolbar style="--background:#fff;padding-left: 0rem; padding-right: 0.75rem;">
        <ion-buttons slot="start" appDebounceClick (debounceClick)="back()">
          <img class="header-icon-img" src="assets/img/back_left.png">
        </ion-buttons>
        <form action="javascript: return true;">
          <ion-searchbar #searchBar (keypress)="search($event,false)" inputmode="" class="search-bar"
            placeholder={{oneWay?oneWay:tagData.placeholder}} autocomplete="off"
            onInput="if(value.length>30)value=value.slice(0,30)" (ionBlur)="ionBlur()" [(ngModel)]="keyword" mode="ios"
            (ionFocus)="focusInput()" (ionChange)="searchChange()" [ngModelOptions]="{standalone: true}">
          </ion-searchbar>
        </form>
        <ion-buttons style="text-align: right;margin-left: 1rem;" class="search-btn" slot="end" appDebounceClick
          (debounceClick)="search()" [ngStyle]="{'color': searchBtnColor}">
          搜索
        </ion-buttons>

      </ion-toolbar>
    </ng-container>



  </ng-template>


</ion-header>
<!-- 搜索历史 -->
<!-- <ng-container *ngIf="this.searchType === 'searchType100'; else searchTypeNot100Histroy"> -->
<ion-content *ngIf="!hasSearched">
  <p class="searchType100-history-label" *ngIf="searchArr.length > 0">历史搜索</p>

  <div class="searchType100-history-bg">
    <div *ngFor="let item of searchArr">
      <div class="searchType100-history-item" appDebounceClick
        (debounceClick)="searchKeyword(item,tagData.position ? false : true)">
        {{item}}
      </div>
    </div>
  </div>
  <p class="tac clearText" *ngIf="searchArr?.length>0" appDebounceClick (debounceClick)="clearHistory()">
    <img class="icon-del" src="assets/img/search_icon_delete@3x.png" alt="xxx">
    <span>清除历史记录</span>
  </p>
</ion-content>

<!-- </ng-container> -->
<!-- <ng-template #searchTypeNot100Histroy>
    <ion-content *ngIf="!hasSearched">
      <div *ngFor="let item of searchArr">
        <ion-item detail="false" class="list-item" appDebounceClick (debounceClick)="searchKeyword(item,tagData.position ? false : true)">
          <ion-label class="history-item">
            <img class="icon" src="assets/img/lately.png" alt="xxx">
            <span>{{item}}</span>
          </ion-label>
        </ion-item>
        
      </div>
      <p class="tac clearText" *ngIf="searchArr?.length>0" appDebounceClick (debounceClick)="clearHistory()">
        <img class="icon-del" src="assets/img/search_icon_delete@3x.png" alt="xxx">
        <span>清除历史记录</span>
      </p>
    </ion-content>
  </ng-template> -->
<!--  -->
<!-- *ngIf="this.coms && this.coms[0] && this.coms[0].tagData.style !== 'tag.AppTabTagLogic' && keyword.length > 0"> -->
<ng-container *ngIf="this.searchType === 'searchType100'; else searchTypeNot100Result">
  <ion-content *ngIf="hasSearched " class="search-content" [ngClass]="{'white-bg': !isGrayBg ,'bg-image':showWaterImg}">
    <div style="padding: 2.5em 1rem 1.75rem 1rem;"
      *ngIf="this.coms && this.coms[0] && this.coms[0].tagData.name == 'appInfoListTagSearchNOImg' && this.coms[0].tagData.data && this.coms[0].tagData.data.data.length === 0  && keyword.length > 0">
      <p style="text-align: center; font-size: 1rem; color: #666666; width: 100%;background:#fff;">
        很抱歉，搜索的"<span style="color: #666666;">{{keyword}}</span>"的小区暂未收录，您可以
      </p>
      <!-- <p style="font-size: 1rem;font-weight: bold;color: #0F0F0F;line-height: 1.38rem;">您可以：</p> -->
    </div>
    <app-nav2Fixed-container *ngIf="coms" [subComs]="coms"></app-nav2Fixed-container>
  </ion-content>
</ng-container>

<ng-template #searchTypeNot100Result>
  <ion-content *ngIf="hasSearched && !tagData.position" class="search-content gray-bg" [ngClass]="{'white-bg': !isGrayBg ,'bg-image':showWaterImg}">
    <div
      style="text-align: center; font-size: 1rem; margin-top: 2.5rem;color: #858894;height: 1.25rem; width: 100%; position:absolute;background:#fff;"
      *ngIf="coms && coms[0]?.tagData?.currentTab === '0' && keyword.length > 0 && showKeyword">抱歉，未找到“<span
        style="color: #FF6314;">{{keyword}}</span>”的相关结果</div>
    <app-nav2Fixed-container *ngIf="coms" [subComs]="coms"></app-nav2Fixed-container>
  </ion-content>
  <!-- 蜂喔 -->
  <ion-content *ngIf="hasSearched && tagData.position" class="search-content gray-bg" [ngClass]="{'white-bg': !isGrayBg ,'bg-image':showWaterImg}">
    <div
      style="text-align: center; font-size: 1rem; margin-top: 2.5rem;color: #858894;height: 1.25rem; width: 100%; position:absolute;background:#fff;"
      *ngIf="!haveResult && keyword.length > 0">抱歉，未找到“<span style="color: #FF6314;">{{keyword}}</span>”的相关结果</div>
    <app-nav2Fixed-container (hasDataList)="hasSearchResult($event)" *ngIf="coms" [subComs]="coms">
    </app-nav2Fixed-container>
  </ion-content>
</ng-template>

<div class="notifyBox" id="notifyBox" *ngIf="appGlobalService.isShowMessageNotifyDiv===true">
  <div class="notifyInnerBox" id="notifyInnerBox" *ngIf="appGlobalService.isShowMessageNotifyDiv===true">
      <div class="messageNotify" id="messageNotify" *ngIf="appGlobalService.isShowMessageNotifyDiv===true">
          <div class="notifyTop"><span class="notifyTopLeft"><img class="notifyIcon" src="https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1649987499675a7c4b06bf1420828c96c1553956c5786.png">
                  您有新信息</span><span class="notifyTopRight">
                  <ng-container *ngIf="appGlobalService.showMessageDateTime">
                      {{appGlobalService.showMessageDateTime}}</ng-container>
              </span></div>
          <p class="messageBody">
              <ng-container *ngIf="appGlobalService.showMessageBody">
                  {{appGlobalService.showMessageBody}}</ng-container>
          </p>
      </div>
  </div>
</div>

<ion-footer *ngIf=" hasSearched &&  footerComs&&footerComs.length>0">
  <app-nav2Fixed-container [subComs]="footerComs"></app-nav2Fixed-container>
</ion-footer>
<!-- </section> -->